<template>
  <div class="app-container">

    <el-form label-width="120px">
      <el-form-item label="汽车名称">
        <el-input v-model="automobile.productName"></el-input>
      </el-form-item>
      <el-form-item label="汽车级别" prop="region">
        <el-select v-model="automobile.productCategory" placeholder="请选择汽车级别">
          <el-option label="A" value="A"></el-option>
          <el-option label="B" value="B"></el-option>
          <el-option label="C" value="C"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="汽车价格">
        <el-input v-model="automobile.productPrice"></el-input>
      </el-form-item>
      <el-form-item label="汽车个数">
        <el-input v-model="automobile.productQuantity"></el-input>
      </el-form-item>
      <el-form-item label="汽车描述">
        <el-input v-model="automobile.productDescribe" :rows="6" type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="汽车图片">
        <el-input v-model="automobile.fileName"></el-input>
      </el-form-item>

      <!-- 汽车图片 -->
      <el-form-item label="汽车图片">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="automobile.fileName"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload"
                   @click="imagecropperShow=true">更换汽车图片
        </el-button>
        <!--
        v-show：是否显示上传组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分
        :url：后台上传的url地址
        @close：关闭上传组件
        @crop-upload-success：上传成功后的回调 -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="'http://192.168.187.129:9001'+'/fileoss/upload'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>

import automobile from '@/api/yydm/automobile'
//上传组件
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: "save",
  components: {ImageCropper, PanThumb},
  //写核心代码位置
  data() {
    return {
      automobile: {
        // id: '',
        productName: '',
        productCategory: '',
        productPrice: '',
        productQuantity: '',
        productDescribe: '',
        fileName: ''
      },

      //上传弹框组件是否显示
      imagecropperShow: false,
      imagecropperKey: 0,  //上传组件key值
      // VUE_APP_BASE_API: process.env.BASE_API, //获取.env.development里面的地址

      saveBtnDisabled: false  //保存按钮是否禁用
    }
  },
  //页面渲染之前执行,一般调用methods的方法
  //只执行一次,
  created() {
    //  判断路径是否有Id值
    if (this.$route.params && this.$route.params.id) {
      //  从路径获取id值
      const id = this.$route.params.id;
      //    调用id查询的方法
      this.getInfo(id);
    }
  },
  //创建具体的方法调用automobile.js中的方法
  methods: {

    //关闭上传组件
    close() {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      // console.log(this.VUE_APP_BASE_API)

    },
    //上传成功后的回调函数
    cropSuccess(data) {
      this.imagecropperShow = true;
      this.automobile.fileName = data.url;
      //  上传成功后,重新打开上传组件时初始化,否则显示上次上传的结果
      this.imagecropperKey = this.imagecropperKey + 1;
    },

    //根据汽车的Id查询的方法
    getInfo(id) {
      automobile.getAutomobileData(id)
        .then(response => {
          console.log(response);
          console.log(response.data)
          console.log(response.data.getAutomobile)
          this.automobile = response.data.getAutomobile
        })
    },

    saveOrUpdate() {
      //判断修改还是添加
      //可以根据id值来做判断
      if (!this.automobile.id) {
        //  添加
        this.saveAutomobile();
      } else {
        //  修改
        this.updateAutomobile();
      }
    },

    //修改方法
    updateAutomobile() {
      automobile.updateAutomobileInfo(this.automobile)
        .then(response => {  //修改成功
          //  提示信息
          this.$message({
            type: 'success',
            message: '修改方法'
          });
          //  回到列表页面,路由跳转
          this.$router.push({path: '/automobile/table'})
        })
    },

    //  添加汽车的方法
    saveAutomobile() {
      automobile.saveAutomobile(this.automobile)
        .then(request => {  //添加成功
          //  提示信息
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          //  回到列表页面,路由跳转
          this.$router.push({path: '/automobile/table'})
        })
    },


  }

}
</script>

<style scoped>

</style>
